<template>
  <div>
    <TitleSecondary title="子阶段" :icon="icon" @change="handleChangeIcon" />
    <div v-show="icon === 'up'" class="log-container">
      <p-table
        class="table-list-container"
        row-key="id"
        :scroll="{ x: '100%' }"
        :columns="columns"
        bordered
        :pagination="false"
        :data-source="dataSource"
        v-bind="$attrs"
        v-on="$listeners"
      >
      </p-table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataSource: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      icon: 'down',
    };
  },
  computed: {
    statusOptions() {
      return this.$store.state.dictionary.dict['business_sub_stage_node'] || {};
    },
    stateOptions() {
      return {
        0: '未启动',
        1: '进行中',
        2: '已完成',
      };
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '子阶段',
          width: 160,
          ellipsis: true,
          dataIndex: 'stage',
          customRender: text => this.statusOptions[text],
        },
        {
          align: 'center',
          title: '状态',
          width: 160,
          ellipsis: true,
          dataIndex: 'processStatus',
          customRender: text => this.stateOptions[text],
        },
        {
          align: 'center',
          title: '开始时间',
          width: 160,
          ellipsis: true,
          dataIndex: 'startTime',
        },
        {
          align: 'center',
          title: '完成时间',
          width: 100,
          ellipsis: true,
          dataIndex: 'endTime',
        },
        {
          align: 'center',
          title: '负责人',
          width: 100,
          ellipsis: true,
          dataIndex: 'currUserName',
        },
      ];
      return columns;
    },
  },
  created() {},
  methods: {
    handleChangeIcon(icon) {
      this.icon = icon === 'down' ? 'up' : 'down';
    },
  },
};
</script>

<style lang="less" scoped>
.table-list-container {
  margin-top: 20px;
  margin-bottom: 40px;
}
</style>
